<!DOCTYPE html>
<html>
<head>
    <title>简易老虎机程序</title>
    <meta charset="utf-8">
    <style type="text/css">
    html,body{margin: 0;padding: 0;overflow: hidden;}
    body{ background: #eee;}
    .res{text-align: center;margin-top: 100px;}
    .num_box{height:450px; width:750px;position:absolute;left:50%;top:140px;margin-left:-370px;z-index:8;overflow:hidden;text-align:center;}
    .num_box .num{background:url(images/num.png) top center repeat-y #ccc;width:181px;height:265px;float:left;margin-right:6px;}
    .num_box .btn{background-color:#89ec6a;width:264px;height:68;position:absolute;left:50%;top:300px;margin-left:-132px;cursor:pointer;clear:both; line-height: 60px;border-radius: 10px;}
    </style>
</head>
<body>
    <div class="res"></div>
    <div class="num_box">
        <div class="num"></div>
        <div class="num"></div>
        <div class="num"></div>
        <div class="num"></div>
        <div class="btn">开始摇奖</div>
    </div>
</body>
<script type="text/javascript" src="js/jquery-1.11.0.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
<script type="text/javascript">
    /*获得随机数*/
    function getRanNum(){
        var x=9999; //最大上限
        var y=1111;//下限
        var ranNum = parseInt(Math.random()*(x-y+1)+y);
        return ranNum;
    }

    var isBegin=false; //用于判断是否正在执行

    $(function(){
        var imgH=265; //每张数字图片高度
        $('.btn').click(function(){
            if(isBegin){return false;} //正在执行摇奖时，防止再次点击按键执行
            isBegin=true;
            var ranNum=getRanNum();
            $('.res').html('摇奖结果：'+ranNum);
            $('.num').css('backgroundPositionY',0);
            var numArr=(ranNum+'').split(''); //获取随机数转换为字符串并分割返回为数组
            $('.num').each(function(index){

                var ele=$(this); //当前元素jquery对象
                setTimeout(function(){ //延迟执行

                    ele.animate({'backgroundPositionY':(imgH*50)-(imgH*numArr[index])
                    },{
                        duration: 6000+index*3000,
                        easing: "easeInOutCirc",
                        complete: function(){
                            if(index==3) isBegin = false;
                        }
                    });
                },300*index);
            });//end each()
        });
    });
</script>
</html>